<template>
	<li class="tiling-wrapper g-thumbnail-box">

		<div class="thumbnail-wrapper" @click="open">
            <div class="project-thumbnail-background">
                <img class="project-thumbnail" 
                :class="{'is-data-view' : project.type === 'data-view'}" v-lazy="imageUrl" @load="imgLoaded" :ref="'thumb-'+project.uid">
            </div>
        </div>

        <div class="project-info">

            <div class="project-info-container">
                <div class="project-title">
                	{{project.title}}
                </div>
                <div class="project-option">
                	<span class="tiling-date">
                		{{project.updatedAt | timeFormat}}
                	</span>
                	<span class="tiling-option">
                		<i class="iconfont icon-brush_fill" @click="open"></i>
                		<i class="iconfont icon-delete" @click="remove"></i>
                	</span>
                </div>
            </div>

        </div>

    </li>
</template>

<script>

	import { format } from '@/utils/date'
	import { appNameMapping } from '@/config/config'

	export default{
		
		name: 'tilingWrapper',
		
		data (){
			return {

			}
		},

		props: {
	        project: Object,
	        isAll: Boolean,
	        index: Number
	    },

		computed: {
	        imageUrl() {
	            return `${this.rootPath}${this.project.uid}/thumb`;
	        },

            rootPath () {
                if (this.project.type) {
                    return appNameMapping[this.project.type]['rootPath']
                }
            }
	    },
		
		activated () {
	        this.$emit( 'on-view-load' );
	    },

		filters: {
			timeFormat (val) {
				return format(val, 'Y-M-D hh:mm');
			},

			nameMapping (val) {
				return appNameMapping[val]['name'];
			}
		},

		methods: {

			imgLoaded(e) {
	            e.target.style.opacity = 1;
	        },

	        open () {
	        	this.$emit('open', this.project.type, this.project.uid);
	        },

	        remove () {
				this.$emit('remove', this.project, this.index);
			}
		}
	}
</script>

<style lang="scss">

	@import 'common';
	$mainFont: #303c46;
    $thumbBackground: #4B4E56;
	
	.tiling-wrapper {
    	width: 240px;
    	height: 210px;
        display: block;
        float: left;
        margin: 0 15px 30px 15px;
        border-radius: $bdRadius;
        background-color: #fff;

        .thumbnail-wrapper {

            position: relative;
            border-radius: $bdRadius;
            width: 100%;
            height: 151px;

            .project-thumbnail-background {
                @include absolute(0, 0, 0, 0);
                background-color: $thumbBackground;
                border-top-left-radius: $bdRadius;
                border-top-right-radius: $bdRadius;
                overflow: hidden;

                img[lazy=loading] {
                    width: 140px;
                    height: 140px;
                    transform: translate(50px, 5px);
                }

                .project-thumbnail {
                    width: 100%;
                    @include filter(drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.5)))
                    vertical-align: middle;
                    transform: translate(0, -20%);
                    opacity: 0;
                }

                .project-thumbnail.is-data-view {
                    transform: translate(0, 5%) !important;
                }
            }
        }

        .project-info {

            height: 69px;
            padding: 8px 12px;
            overflow: hidden;
            color: $mainFont;
            position: relative;

            .project-info-container{

                height: 100%;
                overflow: hidden;

                > div {
                    overflow: hidden;
                }

                .project-title {
                	@include text-overflow();
				    height: 22px;
				    text-align: left;
				    font-size: 14px;
				    line-height: 22px;
				    position: relative;
                }

                .project-option {

                	.tiling-date {
                		height: 16px;
					    font-size: 13px;
					    line-height: 16px;
					    text-align: left;
					    color: #889;
                	}

                	.tiling-option {

        		    	position: absolute;
					    right: 10px;

                		>i {
			    			font-size: 14px;
			    			margin-left: 6px;
			    			color: $gray;
			    			cursor: pointer;
			    		}
                	}

                	

		    		.icon-brush_fill:hover {
		    			color: $info;
		    		}
		    		
		    		.icon-delete:hover {
		    			color: $danger;
		    		}
                }

            }

        }
    }
	
</style>